<template>
	<view class="wrap">
		<view class="currChapNote">
			<view class="currChapBox">
				<view class="currChap">{{eduInfo}}</view>
				<view class="pubTxt">{{puberTxt}}</view>
			</view>
			<view class="chapterNote">
				<view class="noteItem">
					<text class="iconfont icon-wujiaoxing hasZhangwo"></text>
					<text>表示课后诊断已掌握</text>
				</view>
				<view class="noteItem">
					<text class="iconfont icon-wujiaoxing noZhangwo"></text>
					<text>表示课后诊断未掌握</text>
				</view>
				<view class="noteItem">
					<text class="iconfont icon-wujiaoxing noLearn"></text>
					<text>表示课后诊断未学习</text>
				</view>
			</view>
		</view>
		<!-- //0:未学习 1未通过 2:已经掌握 -->
		<view class="chapterList">
			<block v-if="isHasDataFlag">
				<view class="listItem"
					v-for="(item,index) in cptList"
					:key="index"
					@tap="showCurrLoreList(item,index)"
				>
				<!-- :class="[item.loreList != undefined ? 'rightTri' : '']" -->
					<view class="itemTit">
						<view class="chapName ellip">{{item.cptName}}</view>
						<text class="iconfont icon-sanjiao" :class="[item.isShow ? 'rightTri' : '']"></text>
					</view>
					<!-- :class="[item.isShow ? 'show' : '']"   :class="[item.loreList != undefined ? 'show' : '']"-->
					<view class="itemCon" :class="[item.isShow ? 'show' : '']">
						<view class="conItem"
							v-for="(innerItem,innerIndex) in item.loreList"
							:key="innerIndex"
							@tap.stop="goCurrLoreDet(innerItem.loreId,innerItem.studyLogId,innerIndex)"
						>
							<view class="loreName ellip">{{innerItem.loreName}}</view>
							<view class="iconfont icon-wujiaoxing" v-if="innerItem.studyStatus == 0"></view>
							<view class="iconfont icon-wujiaoxing noZhangwo" v-if="innerItem.studyStatus == 1"></view>
							<view class="iconfont icon-wujiaoxing hasZhangwo" v-if="innerItem.studyStatus == 2"></view>
						</view>
					</view>
				</view>
			</block>
			<block v-else-if="isHasDataFlag == false">
				<no-data :noDataTxt="noDataTxt"></no-data>
			</block>
		</view>
	</view>
</template>

<script>
	import { getChapterList } from '@/api/zhuxue'
	export default {
		data() {
			return {
				eduId:'',
				cptId:'',
				eduInfo:'',
				puberTxt:'',
				cptList:[],
				isHasDataFlag:null,
				noDataTxt:'暂无章节',
				isClickFlag:false,//判断是否点击某个单元
				tmpObjItem:{},
				tmpIndex:0,
				innerIndex:-1
			}
		},
		onLoad(options){
			this.eduId = options.eduId;
			this.puberTxt = options.puberTxt;
			//this.loadChapterList('initLoad','',0,'currPage');
		},
		onShow(){
			if(this.isClickFlag){
				this.loadChapterList('handler',this.tmpObjItem,this.tmpIndex,'otherPage');
			}else{
				this.loadChapterList('initLoad','',0);
			}
		},
		methods: {
			loadChapterList(opt,item,index,currPage){
				var field = { account:uni.getStorageSync('token'),eduId:this.eduId,cptId:this.cptId };
				let contentStr = this.crypto.encrypt(JSON.stringify( field )); 
				getChapterList({content:contentStr}).then(res=>{
					//console.log(res)
					this.eduInfo = res.data.datas.eduInfo;
					this.isHasDataFlag = true;
					if(opt == 'handler'){
						this.isClickFlag = true;
						this.tmpObjItem = item;
						this.tmpIndex = index;
						if(currPage == 'currPage'){
							this.cptList.forEach(i => {
								if (i.isShow !== this.cptList[index].isShow) {
									i.isShow = false;
								}
							})
							item.isShow = !item.isShow;
						}
						//item.loreList = res.data.datas.loreList;
						this.cptList[index].loreList = res.data.datas.loreList;
					}else{
						this.cptList = res.data.datas.cptList;
						for(var i=1;i<this.cptList.length;i++){
							this.cptList[i].loreList = [];
						}
					}
				}).catch(err=>{
					this.isHasDataFlag = false;
					console.log(err)
				});
			},
			showCurrLoreList(item,index){
				this.cptId = item.cptId;
				this.loadChapterList('handler',item,index,'currPage');
			},
			goCurrLoreDet(loreId,studyLogId,innerIndex){
				this.innerIndex = innerIndex;
				//console.log('this.innerIndex=' + this.innerIndex)
				uni.navigateTo({
					url:'/pages/subIndex/studyMap/studyMap?loreId=' + loreId + '&studyLogId=' + studyLogId
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		@include respTo(phone){
			margin-top: 210rpx;
		}
		@include respTo(pad){
			margin-top: 150rpx;
		}
	}
</style>
<style lang="scss" scoped>
	.chapterList{
		.itemCon{
			max-height: 0;
			transition: max-height 0.5s;
			overflow: hidden;
			&.show{
				@include respTo(phone){
					max-height: 1200px;
				}
				@include respTo(pad){
					max-height: 1600px;
				}
			}
		}
		.itemTit,
		.conItem{
			@include respTo(phone){
				height: 90rpx;
			}
			@include respTo(pad){
				height: 66rpx;
			}
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #eee;
		}
		.itemTit{
			padding: 0 30rpx;
		}
		.conItem{
			padding: 0 50rpx;
			.loreName{
				width: 90%;
				color: $pss-text-color3;
				@include respTo(phone){
					font-size: $font-size28;
				}
				@include respTo(pad){
					font-size: $padSize16;
				}
			}
			.icon-wujiaoxing{
				color: $pss-text-colora;
				@include respTo(phone){
					font-size: $font-size32;
				}
				@include respTo(pad){
					font-size: $padSize20;
				}
				&.hasZhangwo{
					color: $pss-color-green;
				}
				&.noZhangwo{
					color: $pss-color-red;
				}
			}
		}
		.chapName{
			color: $pss-text-color3;
			font-weight: bold;
			width: 92%;
			@include respTo(phone){
				font-size: $font-size30;
			}
			@include respTo(pad){
				font-size: $padSize20;
			}
		}
		.icon-sanjiao{
			color: $pss-text-colora;
			@include respTo(phone){
				font-size: 40rpx;
			}
			@include respTo(pad){
				font-size:$padSize24;
			}
			&.rightTri{
				transform: rotate(-90deg);
				color: $pss-color-primary_1;
			}
		}
	}
	.currChapNote{
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		@include respTo(phone){
			height: 200rpx;
		}
		@include respTo(pad){
			height: 140rpx;
		}
		background: #fff;
		box-shadow: 0 6rpx 6rpx #e6e6e6;
		display: flex;
		justify-content: space-between;
		z-index: 100;
		.chapterNote,
		.currChapBox{
			@include respTo(phone){
				height: 200rpx;
			}
			@include respTo(pad){
				height: 140rpx;
			}
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: end;
		}
		.chapterNote{
			margin-right: 30rpx;
			color: $pss-text-colora;
			@include respTo(phone){
				font-size: $font-size28;
			}
			@include respTo(pad){
				font-size: $padSize14;
			}
			.noteItem{
				margin-bottom: 15rpx;
				display: flex;
				.icon-wujiaoxing{
					margin-right: 5rpx;
					@include respTo(phone){
						font-size: $font-size30;
					}
					@include respTo(pad){
						font-size: $padSize16;
						margin-top: 2rpx;
					}
					&.hasZhangwo{
						color: $pss-color-green;
					}
					&.noZhangwo{
						color: $pss-color-red;
					}
				}
			}
		}
		.currChapBox{
			margin-left: 30rpx;
			color: $pss-text-color3;
			.currChap{
				font-weight: bold;
				margin-bottom: 10rpx;
				@include respTo(phone){
					font-size: $font-size34;
				}
				@include respTo(pad){
					font-size: $padSize22;
				}
			}
			.pubTxt{
				@include respTo(phone){
					font-size: $font-size28;
				}
				@include respTo(pad){
					font-size: $padSize16;
				}
			}
		}
	}
	.wrap{
		padding-bottom: 20rpx;
	}
</style>
